<template>
  <view class="ui-page ui-page__scroll">
    <uiForm ref="baseForm" v-model="form1">
      <uiField
        label="用户名"
        placeholder="请输入用户名"
        v-model="form1.username"
        :rules="[{  validator, message: '用户名格式不正确' , trigger : 'onBlur' } ]"
      ></uiField>
      <uiField
        label="密码"
        type="password"
        placeholder="请输入密码"
        v-model="form1.password"
        :rules="[{  required : true, message: '请输入密码' } ]"
      ></uiField>
      <uiButton type="primary" form-type="submit" square @click="handleSubmit">提交</uiButton>
    </uiForm>

  
  </view>
</template>

<script>
import uiCell from "@/components/base/cell/index.vue";
import uiCellGroup from "@/components/base/cell-group/index.vue";
import uiButton from "@/components/base/button/index.vue";
import uiForm from "@/components/base/form/index.vue";
import uiField from "components/base/field/index";
export default {
  name: "demoFieldComponentPage",
  components: {
    uiCellGroup,
    uiCell,
    uiButton,
    uiField,
    uiForm
  },
  data() {
    return {
      form1: {
        username: "",
        password: ""
      }
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleSubmit() {
      this.$refs.baseForm.formSubmit(_ => {
        console.log(11);
        uni.showToast({
          title: "提交成功",
          duration: 2000
        });
      });
    },

    // 校验函数返回 true 表示校验通过，false 表示不通过
    validator(val) {
      return /^1\d{2}/.test(val);
    }
  }
};
</script>

<style scoped lang="scss"></style>
